<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS对象</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>手机品牌</th>
        <th>价格</th>
        <th>库存数量</th>
    </tr>
</table>
<script>
    // 1.实例化一个空对象  Person.java-->Person p = new Person();    p.name="xxx";
    let p1 = {};
    // 动态添加属性或方法  JAVA语言不支持动态添加属性和方法
    p1.name = "张三";
    p1.age = 19;
    p1.run = function () {
        console.log(this.name + ":" + this.age);
    }
    // 调用方法
    p1.run();

    // 2.实例化一个自带属性和方法的对象
    let p2 = {
        name: "李四", age: 18, run: function () {
            console.log(this.name + ":" + this.age);
        }
    }
    p2.run();

    // 3.通过JS对象封装服务器响应回来的数据
    let productArr = [
        {title: "华为遥遥领先Mate 60Pro", price: 8000, num: 0},
        {title: "小米 14Pro", price: 6000, num: 10000},
        {title:"苹果15",price:10000,num:50}
    ];
    // 把模拟从服务器请求到的商品数据显示到页面中
    let table = document.querySelector("table");
    for (let p of productArr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
        titleTd.innerText = p.title;
        priceTd.innerText = p.price;
        numTd.innerText = p.num;
        // 把td装进tr
        tr.append(titleTd,priceTd,numTd);
        // 把tr装进table
        table.append(tr);
    }
    productArr.run();
</script>
</body>
</html>